<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>hover显示的例子（二维码）</title>
		<style type="text/css">
			#Img {
				background: url(./img/thumb_pict1.jpeg) no-repeat 0px 0px;
				width: 150px;
				height: 100px;
				position: absolute;
				z-index: 22;
				border: 2px solid green;
				display: none;
			}
			#select{
				display: inline-block;
			}
		</style>
	</head>
	<body>

		<div id="head">
			姓名：<input type="text" id="name" name="name">
			密码：<input type="password" id="password" name="password">
				<label for="pet-select">Choose a pet:</label>
			<div id="select">
				<select name="pets" id="pet-select">
					<option value="">-- 请选择 --</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
				<div id="Img">
				</div>
			</div>
			
		</div>
		<div id="body">
			This is content! This is content! This is content! This is content!
		</div>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#pet-select").hover(function(){
				let selectValue = $("#pet-select").val();
				if(selectValue){
					let imgUrl = "./img/thumb_pict"+selectValue+".jpeg"
					$("#Img").css("background-image","url("+imgUrl+")")
					$("#Img").css("display","block")
				}
				
			},function(){
				$("#Img").css("display","none")
			});
		</script>
	</body>
</html>
